<template>
  <div>
    <el-dialog v-model="visible" width="45vw" title="导入JSON模板" destroy-on-close>
      <el-input v-model="jsonIn" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" style="width: 100%" />
      <template #footer>
        <el-button type="primary" @click="handleImportJson"> 导入JSON </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="JsonImport">
import { ref, nextTick } from 'vue';
const props = defineProps({
  template: {
    type: Object,
    default: () => ({})
  }
});

const visible = ref(false);
const jsonIn = ref('');

const handleImportJson = () => {
  props.template.update(JSON.parse(jsonIn.value));
  visible.value = false;
  jsonIn.value = '';
};

const show = () => {
  visible.value = true;
};

defineExpose({
  show
});
</script>
